﻿<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CO-STAR 提示词生成工具</title>
    <style>
        :root {
            --primary-color: #4285f4;
            --success-color: #34a853;
            --warning-color: #fbbc05;
            --danger-color: #ea4335;
            --light-color: #f8f9fa;
            --dark-color: #202124;
            --border-color: #dadce0;
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        }
 
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
 
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f7fa;
            padding: 20px;
        }
 
        .container {
            max-width: 1000px;
            margin: 0 auto;
        }
 
        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
        }
 
        h1 {
            color: var(--primary-color);
            margin-bottom: 10px;
        }
 
        .tabs {
            display: flex;
            margin-bottom: 20px;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow);
        }
 
        .tab {
            flex: 1;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
        }
 
        .tab.active {
            background-color: var(--primary-color);
            color: white;
        }
 
        .tab:not(.active):hover {
            background-color: #e8f0fe;
        }
 
        .tab-content {
            display: none;
        }
 
        .tab-content.active {
            display: block;
        }
 
        .form-group {
            margin-bottom: 20px;
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: var(--shadow);
        }
 
        .form-group h3 {
            margin-bottom: 15px;
            color: var(--primary-color);
            border-bottom: 2px solid var(--border-color);
            padding-bottom: 8px;
        }
 
        textarea {
            width: 100%;
            min-height: 100px;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-family: inherit;
            font-size: 14px;
            resize: vertical;
        }
 
        textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
        }
 
        .checkbox-group {
            display: flex;
            align-items: center;
            margin: 20px 0;
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
        }
 
        .checkbox-group input {
            margin-right: 10px;
            transform: scale(1.3);
        }
 
        .btn-group {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin: 20px 0;
        }
 
        button {
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
        }
 
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
 
        .btn-secondary {
            background-color: var(--light-color);
            color: var(--dark-color);
            border: 1px solid var(--border-color);
        }
 
        .btn-success {
            background-color: var(--success-color);
            color: white;
        }
 
        .btn-primary:hover {
            background-color: #3367d6;
        }
 
        #open-ai-btn {
            background: linear-gradient(45deg, var(--primary-color), #5a9fd4);
            font-weight: bold;
            position: relative;
            overflow: hidden;
        }
 
        #open-ai-btn:hover {
            background: linear-gradient(45deg, #3367d6, #4a8bc2);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(66, 133, 244, 0.3);
        }
 
        button:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }
 
        button:active {
            transform: translateY(0);
        }
 
        #output-container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: var(--shadow);
            margin-bottom: 20px;
        }
 
        #prompt-output {
            width: 100%;
            min-height: 300px;
            padding: 15px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-family: monospace;
            white-space: pre-wrap;
            overflow-y: auto;
            background-color: #f8f9fa;
        }
 
        .model-selection {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: var(--shadow);
            margin-bottom: 20px;
        }
 
        .model-selection h3 {
            margin-bottom: 15px;
            color: var(--primary-color);
        }
 
        .radio-group {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
 
        .radio-option {
            display: flex;
            align-items: center;
        }
 
        .radio-option input {
            margin-right: 8px;
            transform: scale(1.2);
        }
 
        footer {
            text-align: center;
            margin-top: 30px;
            padding: 20px;
            color: #666;
            font-size: 14px;
        }
 
        @media (max-width: 768px) {
            .btn-group {
                flex-direction: column;
            }
 
            button {
                width: 100%;
            }
 
            .radio-group {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
</head>
 
<body>
    <div class="container">
        <header>
            <h1>CO-STAR 提示词生成工具</h1>
            <p>基于新加坡冠军提示词框架的结构化提示词生成器</p>
        </header>
 
        <div class="tabs">
            <div class="tab active" data-tab="input">CO-STAR 框架输入</div>
            <div class="tab" data-tab="output">提示词输出</div>
        </div>
 
        <div class="tab-content active" id="input-tab">
            <form id="prompt-form">
                <div class="form-group">
                    <h3>Context (背景信息)</h3>
                    <textarea id="context" placeholder="提供与任务相关的背景信息，例如你的身份、当前情况等..."></textarea>
                </div>
 
                <div class="form-group">
                    <h3>Objective (目标)</h3>
                    <textarea id="objective" placeholder="明确需要AI完成的具体任务，尽量简洁明了..."></textarea>
                </div>
 
                <div class="form-group">
                    <h3>Style (风格)</h3>
                    <textarea id="style" placeholder="指定回复的风格，例如：学术论文、商务报告、创意写作等..."></textarea>
                </div>
 
                <div class="form-group">
                    <h3>Tone (语气)</h3>
                    <textarea id="tone" placeholder="设定回复的语气，例如：正式、轻松、友好、严肃等..."></textarea>
                </div>
 
                <div class="form-group">
                    <h3>Audience (受众)</h3>
                    <textarea id="audience" placeholder="定义目标受众及其知识水平，例如：专业人士、初学者、普通大众等..."></textarea>
                </div>
 
                <div class="form-group">
                    <h3>Response (响应格式)</h3>
                    <textarea id="response" placeholder="指定回复的格式要求，例如：列表、段落、代码、表格等..."></textarea>
                </div>
 
                <div class="checkbox-group">
                    <input type="checkbox" id="json-output">
                    <label for="json-output">以JSON格式输出提示词</label>
                </div>
 
                <div class="btn-group">
                    <button type="button" class="btn-primary" id="generate-btn">生成提示词</button>
                    <button type="button" class="btn-secondary" id="clear-btn">清空内容</button>
                </div>
            </form>
        </div>
 
        <div class="tab-content" id="output-tab">
            <div id="output-container">
                <h3>生成的提示词:</h3>
                <pre id="prompt-output">在此处将显示生成的提示词...</pre>
            </div>
 
            <div class="model-selection">
                <h3>选择 AI 模型</h3>
                <div class="radio-group">
                    <div class="radio-option">
                        <input type="radio" id="qwen" name="model" value="通义千问" checked>
                        <label for="qwen">通义千问</label>
                    </div>
                    <div class="radio-option">
                        <input type="radio" id="deepseek" name="model" value="DeepSeek">
                        <label for="deepseek">DeepSeek</label>
                    </div>
                    <div class="radio-option">
                        <input type="radio" id="doubao" name="model" value="豆包">
                        <label for="doubao">豆包</label>
                    </div>
                </div>
 
                <div class="btn-group">
                    <button type="button" class="btn-secondary" id="copy-btn">复制到剪贴板</button>
                    <button type="button" class="btn-secondary" id="export-txt-btn">导出为文本文件</button>
                    <button type="button" class="btn-success" id="export-json-btn">导出为JSON文件</button>
                    <button type="button" class="btn-primary" id="open-ai-btn">打开AI对话</button>
                </div>
            </div>
        </div>
 
        <footer>
            <p>基于 CO-STAR 框架的提示词生成工具 | 新加坡冠军提示词模板</p>
        </footer>
    </div>
 
    <script>
        // AI模型网页地址配置
        const modelUrls = {
            "通义千问": "https://tongyi.aliyun.com/qianwen/",
            "DeepSeek": "https://chat.deepseek.com",
            "豆包": "https://www.doubao.com/chat/"
        };
 
        // Tab切换功能
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除所有活动状态
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
 
                // 添加活动状态到当前选项
                tab.classList.add('active');
                const tabId = tab.getAttribute('data-tab');
                document.getElementById(`${tabId}-tab`).classList.add('active');
            });
        });
 
        // 生成提示词功能
        document.getElementById('generate-btn').addEventListener('click', generatePrompt);
 
        // 清空内容功能
        document.getElementById('clear-btn').addEventListener('click', clearAllFields);
 
        // 复制到剪贴板功能
        document.getElementById('copy-btn').addEventListener('click', copyToClipboard);
 
        // 导出为文本文件功能
        document.getElementById('export-txt-btn').addEventListener('click', () => exportToFile('txt'));
 
        // 导出为JSON文件功能
        document.getElementById('export-json-btn').addEventListener('click', () => exportToFile('json'));
 
        // 打开AI对话功能
        document.getElementById('open-ai-btn').addEventListener('click', openAIChat);
 
        // 生成提示词函数
        function generatePrompt() {
            // 获取所有输入值
            const context = document.getElementById('context').value.trim();
            const objective = document.getElementById('objective').value.trim();
            const style = document.getElementById('style').value.trim();
            const tone = document.getElementById('tone').value.trim();
            const audience = document.getElementById('audience').value.trim();
            const response = document.getElementById('response').value.trim();
            const jsonOutput = document.getElementById('json-output').checked;
 
            let fullPrompt = '';
 
            if (jsonOutput) {
                // 生成JSON格式的提示词
                const promptData = {};
 
                if (context) promptData.context = context;
                if (objective) promptData.objective = objective;
                if (style) promptData.style = style;
                if (tone) promptData.tone = tone;
                if (audience) promptData.audience = audience;
                if (response) promptData.response = response;
 
                fullPrompt = JSON.stringify(promptData, null, 2);
            } else {
                // 构建传统格式的提示词
                const promptParts = [];
 
                if (context) promptParts.push(`# CONTEXT #\n${context}`);
                if (objective) promptParts.push(`# OBJECTIVE #\n${objective}`);
                if (style) promptParts.push(`# STYLE #\n${style}`);
                if (tone) promptParts.push(`# TONE #\n${tone}`);
                if (audience) promptParts.push(`# AUDIENCE #\n${audience}`);
                if (response) promptParts.push(`# RESPONSE #\n${response}`);
 
                fullPrompt = promptParts.join('\n\n');
            }
 
            // 显示生成的提示词
            document.getElementById('prompt-output').textContent = fullPrompt || '在此处将显示生成的提示词...';
 
            // 自动切换到输出标签页
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
            document.querySelector('.tab[data-tab="output"]').classList.add('active');
            document.getElementById('output-tab').classList.add('active');
        }
 
        // 清空所有字段
        function clearAllFields() {
            document.getElementById('context').value = '';
            document.getElementById('objective').value = '';
            document.getElementById('style').value = '';
            document.getElementById('tone').value = '';
            document.getElementById('audience').value = '';
            document.getElementById('response').value = '';
            document.getElementById('json-output').checked = false;
        }
 
        // 复制到剪贴板
        function copyToClipboard() {
            const output = document.getElementById('prompt-output');
            const text = output.textContent;
 
            if (text && text !== '在此处将显示生成的提示词...') {
                navigator.clipboard.writeText(text).then(() => {
                    alert('提示词已复制到剪贴板!');
                }).catch(err => {
                    console.error('复制失败:', err);
                    alert('复制失败，请手动复制');
                });
            } else {
                alert('没有可复制的内容');
            }
        }
 
        // 导出到文件
        function exportToFile(format) {
            const output = document.getElementById('prompt-output');
            const content = output.textContent;
 
            if (!content || content === '在此处将显示生成的提示词...') {
                alert('没有可导出的内容，请先生成提示词');
                return;
            }
 
            const jsonOutput = document.getElementById('json-output').checked;
            let filename, blob;
 
            if (format === 'json' || (format === 'txt' && jsonOutput)) {
                filename = 'co_star_prompt.json';
                blob = new Blob([content], { type: 'application/json' });
            } else {
                filename = 'co_star_prompt.txt';
                blob = new Blob([content], { type: 'text/plain' });
            }
 
            // 创建下载链接
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
 
            // 清理
            setTimeout(() => {
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }, 100);
        }
 
        // 打开AI对话
        function openAIChat() {
            const output = document.getElementById('prompt-output');
            const content = output.textContent;
 
            if (!content || content === '在此处将显示生成的提示词...') {
                alert('请先生成提示词再打开AI对话');
                return;
            }
 
            // 获取选中的AI模型
            const selectedModel = document.querySelector('input[name="model"]:checked').value;
            const modelUrl = modelUrls[selectedModel];
 
            if (!modelUrl) {
                alert('未找到对应的AI模型地址');
                return;
            }
 
            // 将提示词复制到剪贴板
            navigator.clipboard.writeText(content).then(() => {
                // 打开AI对话页面
                window.open(modelUrl, '_blank');
 
                // 显示提示信息
                setTimeout(() => {
                    alert(`已打开 ${selectedModel} 对话页面，提示词已复制到剪贴板。\n\n请在新打开的页面中粘贴提示词并发送。`);
                }, 500);
            }).catch(err => {
                console.error('复制失败:', err);
                // 即使复制失败也打开页面
                window.open(modelUrl, '_blank');
                alert(`已打开 ${selectedModel} 对话页面。\n\n请手动复制提示词并在新页面中粘贴发送。`);
            });
        }
    </script>
</body>
 
</html>